<template>
    <div class="background-wrap" clearfix>
      <div class="student-profile">
        <h2 class="title">使用须知</h2>
        <el-alert title="系统须知" type="info">
            <template slot='title'>
                <div class="iconSize">欢迎使用六级报考系统！这是一个方便快捷的在线报名平台，帮助你轻松参加六级考试。让我来为您详细介绍一下首页的功能和使用方法。</div>
                <div class="iconSize">1、注册与登录： 如果您是第一次使用六级报考系统，您需要先点击首页上的「注册」按钮进行账号注册。如果您已经拥有账号，您可以直接点击「登录」按钮，输入您的账号和密码进行登录。</div>
                <div class="iconSize">2、个人信息管理： 一旦成功登录，您可以点击页面上的「个人信息」按钮，进入个人信息管理页面。在这里，您可以编辑和更新您的个人资料，包括姓名、联系方式、考试地点等。请确保您的个人信息准确无误，以便顺利进行报名和接收相关通知。</div>
                <div class="iconSize">3、报名申请： 在首页中，您可以找到「报名申请」按钮。点击后，您将进入报名申请页面，您需要按照页面上的指引填写您的报名信息，包括考试科目、考试日期等。请注意填写准确无误的信息，以免影响报名的成功与顺利。</div>
                <div class="iconSize">4、成绩查询： 当考试结束后，您可以在首页上找到「个人成绩」按钮。点击后，您可以输入相关信息来查询您的考试成绩。我们将会及时通知您成绩的发布时间，敬请关注。</div>
                <div class="iconSize">感谢您选择六级报考系统，我们致力于为您提供最便捷、高效的服务。如果您在使用过程中遇到任何问题或困惑，我们的客服团队将随时为您提供支持和解答。</div>
            </template>
        </el-alert>
      <br/>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
    data() {
        return {
        }
    }
  };
  </script>
  
  <style scoped>
  .background-wrap {
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 200;
    width: 100%;
    height: 100%;
  }
  
  .student-profile {
    margin: 0;
    padding: 50px 50px 50px 250px;
    max-width: 800px;
  }
  
  .title {
    margin-bottom: 30px;
    font-size: 32px;
    color: #000000;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .el-form-item__label {
    font-size: 16px;
    color: #fff;
    line-height: 36px;
  }
  
  .el-form-item__content {
    font-size: 16px;
  }
  
  .el-button {
    font-size: 16px;
    margin-right: 10px;
  }
  
  .el-radio {
    font-size: 16px;
  }
  
  .el-input__inner {
    font-size: 16px;
  }
  
  .el-form-item__error {
    font-size: 14px;
    color: #f56c6c;
    margin-top: 5px;
  }
  
  .el-form-item.is-error .el-form-item__label {
    color: #f56c6c;
  }
  
  .el-button--primary {
    background-color: #409EFF;
    border-color: #409EFF;
  }
  
  .el-button--primary:hover {
    background-color: #66B1FF;
    border-color: #66B1FF;
  }
  
  .el-button--primary:focus {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
  
  .el-input {
    margin-right: 20px;
    width: 350px;
  }
  
  @media (max-width: 767px) {
    .el-form-item__label {
      width: 100%;
      text-align: left;
    }
  
    .el-input {
      margin-right: 0;
      width: 100%;
    }
  }
  .iconSize{
    font-size: 16px;
    padding: 10px;
    font-weight: bold;
    
}
  </style>